<template>
  <div class="image-upload">
    <!--
      el-upload组件 二次封装
      1.list-type 指定外观样式 :  picture-card

      2.action 必传 需要给一个后端接口地址, elementui会自动帮你发送请求
      我们不需要他自动发请求, 我们是要自己发送请求到自己的图片服务器上
      为了不让他报错, 可以给空 #;  只给# 是没法阻止他自动发送请求

      3.fileList 设置文件列表数组, [{url: 'xxx'}]

      4.on-preview 提供一个函数, 这个函数会在用户点击了+号预览以后, 会触发
      默认配置了这个属性, 就会有预览的+号

      5.limit 设置上传的最大数量

      6.on-remove 提供一个函数, 这个函数会在你点了垃圾桶删除操作, 触发
      注意点: 你点了删除以后, 你看到的图片被删除了仅仅只是结构中的图片被删除了, 假象, 而真正的数据层的fileList并没有变化
      => 手动更新

      7.http-request  提供一个函数(有参数), 自己处理上传的逻辑..
      配置了以后, 就不会自动帮你发请求了, 你自己去处理上传的逻辑覆盖默认的上传

      8.on-change 提供一个函数, 添加文件、上传成功和上传失败时都会被调用

      9.before-upload 提供一个函数, 这个函数会在真正上传前调用, 一般用于文件的限制(满足条件 return true)

      注意点: 删除操作, 结构中已经删了这个图片了, 但是数据中没有删除 => 手动更新数据;
              添加操作, 也有这个问题...
     -->
    <el-upload
      action="#"
      list-type="picture-card"
      :file-list="fileList"
      :on-preview="handlePictureCardPreview"
      :limit="count"
      :class="{disabled: isDisabled}"
      :on-remove="handleRemove"
      :http-request="handleUpload"
      :on-change="handleChange"
      :before-upload="handleBeforeUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>

    <!-- <el-progress :text-inside="true" :stroke-width="20" :percentage="percentage" style="width: 300px" /> -->

    <!-- 图片预览的对话框 -->
    <el-dialog
      title="预览图片"
      :visible="showDialog"
      @close="showDialog = false"
    >
      <img :src="imgSrc" alt="" style="width: 100%">
    </el-dialog>
  </div>
</template>

<script>
// SecretId: AKIDJgofFpfVUQ9C0Xr5Xjd6ID4B8oFPLxLT
// SecretKey: WnsjKjslM8dtrbB6lciUzDBwSnxHI2Vh

// 下载 => 导入 => 新建实例 => 通过实例发请求
import COS from 'cos-js-sdk-v5' // 导入腾讯云的包(sdk)
const cos = new COS({
  SecretId: 'AKIDJgofFpfVUQ9C0Xr5Xjd6ID4B8oFPLxLT', // 身份识别ID
  SecretKey: 'WnsjKjslM8dtrbB6lciUzDBwSnxHI2Vh' // 身份秘钥
})

// cos()

export default {
  props: {
    count: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      fileList: [],
      showDialog: false,
      imgSrc: ''
      // percentage: 0
    }
  },
  computed: {
    isDisabled() {
      return this.fileList.length >= this.count
    },
    isAllUploadSuccess() {
      return this.fileList.every(item => item.status === 'success')
    }
  },
  methods: {
    handlePictureCardPreview(file) {
      console.log('我被预览了...', file.url)
      this.showDialog = true

      // 将预览的图片url赋值给imgSRC
      this.imgSrc = file.url
    },
    handleRemove(file, fileList) {
      // file => 已经被删除的文件对象  uid
      // fileList => 结构中的文件列表(已经更新)
      // this.fileList => 自己数据层的文件列表(没有更新) => 手动更新
      console.log('这张图片要删除了..', file, fileList, this.fileList)
      // 1.自己过滤
      // this.fileList = this.fileList.filter(item => item.uid !== file.uid)
      // 2....展开运算符
      this.fileList = [...fileList]
    },
    handleUpload(obj) {
      // 你要上传一个图片, 但是图片在哪???
      // 文档中关于这个函数少了一个参数 obj
      // obj.file => 待上传的文件对象
      console.log('去上传吧...', obj.file)
      const fileObj = this.fileList.find(item => item.uid === obj.file.uid)

      // 要开始发请求了,,,
      fileObj.status = 'uploading'

      // cos腾讯云服务器发请求的语法
      cos.putObject({
        Bucket: 'hrsaas-94-1304657626', // 存储桶的名称
        Region: 'ap-shanghai', // 存储桶所在地域
        Key: parseInt(Math.random() * 999999) + obj.file.name, // 存储文件的键
        StorageClass: 'STANDARD', // 存储类型
        Body: obj.file, // 真正上传的文件对象
        // 配置进度相关的函数, 将来每上传一点, 就会触发这个函数一次
        // 会执行多次, 直到文件上传结束...
        onProgress: (progressData) => {
          console.log(JSON.stringify(progressData))
          // this.percentage = parseInt(progressData.percent * 100)
          fileObj.percentage = parseInt(progressData.percent * 100)
        }
      }, (err, data) => {
        // 请求结束后执行这个函数, 可以在这个函数中拿到结果
        // this => 组件实例
        console.log(err || data)
        if (err) {
          console.log(err)
          return
        }

        fileObj.url = 'https://' + data.Location

        // 用户网络太好了, 导致只看到进度条一闪而过, 并没有看到进度条增长的过程. 体验不好
        setTimeout(() => {
          // 右上角有个√
          fileObj.status = 'success'
        }, 1000)
      })

      // 实现上传(请求自己的图片服务器-存储桶)
      // 有别于我们之前的请求, 流程差不多...
      // 1.下载 yarn add axios
      // 2.导入 import axios from 'axios'
      // 3.新建axios实例  const http = axios.create()
      // 4.http({method: 'get', url: 'xxx'})
    },
    handleChange(file, fileList) {
      // file => 添加的那个文件对象
      // fileList => 结构中的文件数组
      // 手动更新数据层的fileList
      // console.log(file, fileList, this.fileList)
      this.fileList = [...fileList]
    },
    handleBeforeUpload(file) {
      // file => 待上传的文件对象
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isLt2M) {
        // 超过2M
        this.$message.error('上传图片大小不能超过 2MB!')
        return false
      }

      return true
    }
  }
}
</script>

<style lang="scss" scoped>
.disabled {
  ::v-deep {
    .el-upload--picture-card {
      display: none;
    }
  }
}

</style>
